<template>
  <div class="login">
    <img class="logo" src="../../assets/images/logo2.png" alt="" />
    <div class="login-box">
      <h1>欢迎来到海蓝背调平台</h1>
      <el-input
        v-model="loginInfo.userName"
        style="margin-top: 40px"
        placeholder="请输入用户名"
      ></el-input>

      <el-input
        style="margin-top: 26px"
        :type="passwordShow ? 'text' : 'password'"
        placeholder="请输入密码"
        v-model="loginInfo.userPwd"
      >
        <img
          slot="suffix"
          class="eye"
          @click="passwordShow = !passwordShow"
          :src="passwordShow ? icons.hide : icons.show"
        />
      </el-input>
      <el-button
        type="primary"
        style="width: 100%;margin-top: 32px"
        @click="login"
        >登陆</el-button
      >
    </div>
  </div>
</template>
<script>
import { login } from "@/api/user/user.js";
const show = require("./show.png");
const hide = require("./hide.png");

export default {
  data() {
    return {
      loginInfo: { userName: "", userPwd: "" },
      passwordShow: false,
      icons: { show, hide },
    };
  },
  methods: {
    login() {
      login(this.loginInfo)
        .then((r) => {
          this.$store.commit("SET_USER", r);
          this.$router.push("/");
        })
        .catch(() => {});
    },
  },
  mounted: function() {},
};
</script>
<style lang="scss">
.login {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-image: url("./bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  .logo {
    position: absolute;
    width: 200px;
    // height: 48px;
    top: 40px;
    left: 70px;
  }
  .login-box {
    width: 440px;
    height: 386px;
    background-color: #fff;
    border-radius: 2px;
    padding: 50px 40px;
    h1 {
      font-size: 28px;
      color: #0f1518;
      font-weight: normal;
    }
    .eye {
      width: 20px;
      height: 20px;
      cursor: pointer;
      margin-top: 10px;
    }
  }
}
</style>
